<template>
  <view class="content">
    <u-navbar :is-back="false" title="登录" :is-fixed="true" title-color="#000"
              :border-bottom="false"
              :background="background"
    ></u-navbar>
    <image src="../../static/img/sign_in_bg.png" class="bg_img" :style="{height: video_height + 'px'}"></image>
    <view class="main">
      <image src="../../static/img/login_logo.png" class="logo"></image>
      <view class="containner">
        <div class="header">
          <div class="item" :class="{'to_active': login_type == 1}" @click="changeType(1)">验证码登录</div>
          <div class="item" :class="{'to_active': login_type == 2}" @click="changeType(2)">密码登录</div>
        </div>
        <view class="form_wrp">
          <u-form :model="form" ref="uForm" label-width="0" v-if="login_type ==1">
            <u-form-item prop="name">
              <u-input v-model="form.phone" placeholder="请输入手机号"/>
            </u-form-item>
            <u-form-item prop="name">
              <view style="display: flex">
                <u-input v-model="inputCode" placeholder="请输入右侧验证码" style="flex: 1"/>
                <view class="color-333 code"  @click="createCode">{{checkCode}}</view>
              </view>
            </u-form-item>
            <u-form-item prop="name">
              <u-input v-model="form.smsCode" type="number" placeholder="请输入验证码"/>
              <view class="wrap" slot="right">
                <u-toast ref="uToast"></u-toast>
                <u-verification-code :seconds="seconds" ref="uCode"
                @change="codeChange"></u-verification-code>
                <view @click="getCode" class="code_btn">{{tips}}</view>
              </view>
            </u-form-item>
          </u-form>
          <u-form :model="form" ref="uForm" label-width="0" v-else>
            <u-form-item prop="username">
              <u-input v-model="form.username" placeholder="请输入手机号"/>
            </u-form-item>
            <u-form-item prop="name">
              <view style="display: flex">
                <u-input v-model="inputCode" placeholder="请输入右侧验证码" style="flex: 1"/>
                <view class="color-333 code" @click="createCode">{{checkCode}}</view>
              </view>
            </u-form-item>
            <u-form-item prop="password">
              <u-input v-model="form.password" type="password" placeholder="请输入密码"/>
            </u-form-item>
            <u-form-item>
              <navigator url="/pages/login/forget_password" hover-class="navigator-hover">
                <view class="code_btn" style="text-align: right">忘记密码</view>
              </navigator>
            </u-form-item>
          </u-form>
          <u-button @click="submit" :custom-style="btn_background" shape="circle">登陆</u-button>
          <view class="agree">
            <u-checkbox-group>
              <u-checkbox shape="circle"
                          label-size="24"
                          :active-color="btn_background.background"
                          :label-disabled="true" v-model="checkAgree">
                未注册用户登录时将自动创建账号,且代表您已阅读完毕并同意
                <navigator url="/pages/login/user_use" class="color-active" style="display: inline">《用户使用协议》</navigator>
                和
                <navigator url="/pages/login/user_yin" class="color-active" style="display: inline">《隐私政策》</navigator>
              </u-checkbox>
            </u-checkbox-group>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import mixins from "../mixins/mixins";
  import loginMixins from "../mixins/loginMixins";
  import {TOAST,CHECK_PHONE} from "../../util/util";
  import {request} from "../../util/api";

  export default {
    mixins: [mixins,loginMixins],
    onLoad(options) {
      if (options.backUrl) {
        this.backUrl = options.backUrl
      }
    },
    data() {
      return {
        background: {
          backgroundColor: 'transparent',
        },
        form: {
        	phone: process.env.NODE_ENV == 'development' ? 15683668171 : '',
        	username: process.env.NODE_ENV == 'development' ? 15683668171 : '',
          password: process.env.NODE_ENV == 'development' ? 'zbz12345' : ''
        },
        tips: '',
				seconds: 60,
        login_type: 2,
        checkCode: '',
        checkAgree: false,
        inputCode: '',
        backUrl: ''
      }
    },
    mounted() {
    	this.createCode()
    },
    computed: {
      video_height() {
        let info = uni.getSystemInfoSync()
        return info.screenHeight
      }
    },
    methods: {
      submit() {
        let isValidate = this.checkForm()
        if (isValidate) {
        	request({
              url: this.login_type == 1 ? '/app/base/phoneLogin' : '/login',
              data: this.form,
              //token: true,
              method: this.login_type == 1 ? 'get' : 'post'
            }).then(ret => {
              TOAST('登录成功');
              var user = {};
              user.token = ret.token;
              user.mobile = this.form.phone || this.form.username;
              uni.setStorageSync('zbz_user', user);
              this.closeToWin();
            })
        }
      },

      // 表单验证
      checkForm() {
        if (this.login_type == 1) {
          if (!CHECK_PHONE(this.form.phone)) {
            TOAST('请输入正确的手机号')
				    return false;
          }
          if (!this.form.smsCode) {
          	TOAST('请输入验证码')
				    return false;
          }
        } else {
          if (!CHECK_PHONE(this.form.username)) {
            TOAST('请输入正确的手机号')
				    return false;
          }
          if (!this.form.password) {
          	TOAST('请输入密码')
				    return false;
          }
        }
        if (this.inputCode.toUpperCase() != this.checkCode) {
        	TOAST('验证码输入错误')
				  return false;
        }
        if (!this.checkAgree) {
        	TOAST('请阅读用户使用协议及隐私政策并勾选同意')
				  return false;
        }
        return true
      },

      codeChange(text) {
				this.tips = text;
			},
      // 获取验证码
			getCode() {
      	if (!CHECK_PHONE(this.form.phone)) {
          TOAST('请输入正确的手机号')
          return false;
        }
        if (this.inputCode.toUpperCase() != this.checkCode) {
        	TOAST('验证码输入错误')
				  return false;
        }
				if(this.$refs.uCode.canGetCode) {
					request({
						lodingTxt: '正在获取验证码',
            url: '/app/base/sendSms',
            data: {phone: this.form.phone}
					}).then(res => {
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
          })
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},

      changeType(type) {
      	this.login_type = type
        this.form = {}
        this.createCode()
      },

      createCode() {
        var code = '';
        var codeLength = 4;
        var random = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
          'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
        for (var i = 0; i < codeLength; i++) {
          var index = Math.floor(Math.random() * 26);
          code += random[index];
        }
        this.checkCode = code
        if (process.env.NODE_ENV == 'development') {
          this.inputCode = code
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  $active_color: #2A6AAA;
  .content {
    .bg_img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
    }
    .main {
      z-index: 999;
      .logo {
        width: 412upx;
        height: 82upx;
        margin: 130upx auto;
        display: block;
      }
      .containner {
        background: #fff;
        padding: 30upx;
        padding-top: 0;
        width: 660upx;
        margin: 0 auto;
        border-radius: 16upx;
        .header {
          color: #333333;
          position: relative;
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-size: 32upx;
          &:after {
            content: " ";
            position: absolute;
            left: 0;
            bottom: -1px;
            right: 0;
            height: 1px;
            border-bottom: 2upx solid #E5E5E5;
            color: #e0e0e0;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
          }
          .item {
            height: 104upx;
            line-height: 104upx;
          }
          .to_active {
            color: $active_color;
            border-bottom: 4upx solid $active_color;
          }
        }
        .form_wrp {
          .code {
            font-weight: bold;
            font-size: 40upx;
            width: 120upx;
          }
          .code_btn {
            color: $active_color;
          }
        }
        .agree {
          margin-top: 40upx;
        }
      }
    }
  }
</style>
